<template>
  <van-tabbar route fixed placeholder border @change="onTabChange">
    <van-tabbar-item
      replace
      :to="{ name: 'home' }"
      :icon="currentRouteName === 'home' ? homeActiveIcon : homeIcon"
      class="shouye-icon"
      @click="onTabClick('home')"
    ></van-tabbar-item>
    <van-tabbar-item
      replace
      :to="{ name: 'idea' }"
      :icon="currentRouteName === 'idea' ? ideaActiveIcon : ideaIcon"
      class="leida-icon"
      @click="onTabClick('idea')"
    ></van-tabbar-item>
    <van-tabbar-item
      replace
      :to="{ name: 'add' }"
      icon="/images/add.png"
      class="custom-icon"
      @click="onTabClick('add')"
    ></van-tabbar-item>
    <van-tabbar-item
      replace
      :to="{ name: 'search' }"
      :icon="currentRouteName === 'search' ? searchActiveIcon : searchIcon"
      class="search-icon"
      @click="onTabClick('search')"
    ></van-tabbar-item>
    <van-tabbar-item
      replace
      :to="{ name: 'user' }"
      :icon="currentRouteName === 'user' ? userActiveIcon : userIcon"
      class="geren-icon"
      @click="onTabClick('user')"
    ></van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { computed } from 'vue'
import { showToast } from 'vant'

// 普通图标
import homeIcon from '../assets/images/首页.png'
import ideaIcon from '../assets/images/leida-copy.png'
import searchIcon from '../assets/images/搜索.png'
import userIcon from '../assets/images/个人中心-我的.png'

// 选中图标
import homeActiveIcon from '../assets/images/首页 (点击).png'
import ideaActiveIcon from '../assets/images/leida-copy-copy.png'
import searchActiveIcon from '../assets/images/a-rongqi2021x-copy.png'
import userActiveIcon from '../assets/images/个人中心-我的-选中.png'

const route = useRoute()
const router = useRouter()
const currentRouteName = computed(() => route.name)

const onTabClick = (tab) => {
  const isLogin = localStorage.getItem('isLogin')
  if (!isLogin) {
    if (tab === 'search') {
      router.replace({ name: 'search' })
    } else if (tab === 'user') {
      router.replace({ name: 'login' })
    } else {
      showToast('请登录~')
    }
  } else {
    // 已登录，正常跳转
    if (tab === 'home') router.replace({ name: 'home' })
    else if (tab === 'idea') router.replace({ name: 'idea' })
    else if (tab === 'add') router.replace({ name: 'add' })
    else if (tab === 'search') router.replace({ name: 'search' })
    else if (tab === 'user') router.replace({ name: 'user' })
  }
}

const onTabChange = () => {}
</script>

<style scoped>
.custom-icon :deep(img) {
  width: 2.1em;
  height: 2.1em;
}
.shouye-icon :deep(img) {
  width: 1.55em;
  height: 1.55em;
}
.leida-icon :deep(img) {
  width: 1.55em;
  height: 1.55em;
}
.geren-icon :deep(img) {
  width: 1.4em;
  height: 1.4em;
}
.search-icon :deep(img) {
  width: 1.5em;
  height: 1.5em;
}
</style>
